<!-- From Uiverse.io by iZOXVL  - Tags: simple, material design, login, purple, minimalist, button, form, card -->
<div
  style="animation: slideInFromLeft 1s ease-out;"
  class="max-w-md w-full bg-gradient-to-r from-blue-800 to-purple-600 rounded-xl shadow-2xl overflow-hidden p-8 space-y-8"
>
  <h2
    style="animation: appear 2s ease-out;"
    class="text-center text-4xl font-extrabold text-white"
  >
    Welcome
  </h2>
  <p style="animation: appear 3s ease-out;" class="text-center text-gray-200">
    Sign in to your account
  </p>
  <form method="POST" action="#" class="space-y-6">
    <div class="relative">
      <input
        placeholder="john@example.com"
        class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500"
        required=""
        id="email"
        name="email"
        type="email"
      />
      <label
        class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm"
        for="email"
        >Email address</label
      >
    </div>
    <div class="relative">
      <input
        placeholder="Password"
        class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500"
        required=""
        id="password"
        name="password"
        type="password"
      />
      <label
        class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm"
        for="password"
        >Password</label
      >
    </div>
    <div class="flex items-center justify-between">
      <label class="flex items-center text-sm text-gray-200">
        <input
          class="form-checkbox h-4 w-4 text-purple-600 bg-gray-800 border-gray-300 rounded"
          type="checkbox"
        />
        <span class="ml-2">Remember me</span>
      </label>
      <a class="text-sm text-purple-200 hover:underline" href="#"
        >Forgot your password?</a
      >
    </div>
    <button
      class="w-full py-2 px-4 bg-purple-500 hover:bg-purple-700 rounded-md shadow-lg text-white font-semibold transition duration-200"
      type="submit"
    >
      Sign In
    </button>
  </form>
  <div class="text-center text-gray-300">
    Don't have an account?
    <a class="text-purple-300 hover:underline" href="#">Sign up</a>
  </div>
</div>


    